html,
body {
	margin: 0;
	padding: 0;
}

html {
	background-image: -webkit-radial-gradient(center, ellipse cover, #5ca084 0%, #1b5955 100%);
	background-size: 100% 100%;
	width: 100vw;
	min-height: 100vh;
	text-align: center;
}

h1 {
	color: #fff;
	font-size: 2rem;
	-webkit-font-smoothing: subpixel-antialiased;
	margin: 1rem 0;
	text-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.6), 0 -0.2rem 0.2rem rgba(255, 255, 255, 0.3);
	width: 100%;
	margin-bottom: 2rem;
}

#index span {
	font-size: 1.5rem;
	box-sizing: border-box;
}

#img::after {
	content: '输入纹理(.png)';
}

#atlas::after {
	content: '输入图集(.atlas)';
}

#json::after {
	content: '输入骨骼(.json)';
}

#img-name,
#atlas-name,
#json-name {
	height: 1rem;
	color: yellow;
}

#file1,
#file2,
#file3 {
	display: none;
}

.setColor {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

.label {
	color: #FFFFFF;
	font-size: 1.5rem;
	text-shadow: 0 0.05rem rgba(0, 0, 0, 0.8), 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2), 0 -0.2rem 0.4rem rgba(255, 255, 255, 0.2);
}

#certain {
	background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b,
		#03a9f4, #f441a5, #ffeb3b, #03a9f4);
	border-radius: 5px;
	background-size: 400%;
	width: 200px;
	height: 60px;
	border-radius: 30px;
	outline: 0;
	border: 0;
	animation: animate 8s linear infinite;
	font-size: 1.5rem;
	color: white;
	margin-top: 50px;
	cursor: pointer;
}

@keyframes animate {
	0% {
		background-position: 0%;
	}

	50% {
		background-position: -100%;
	}

	100% {
		background-position: -200%;
	}

	150% {
		background-position: -300%;
	}

	200% {
		background-position: -400%;
	}
}

#player {
	width: 100vw;
	height: 100vh;
	display: none;
}

[class*="zocial-"]:before {
	font-size: 3rem;
}

[class$="appstore"] {
	background: #1CA3F3;
}

[class$="call"] {
	background: #4BBB28;
}

[class$="cal"] {
	background: #DE372C;
}

[class*="zocial-"] {
	*zoom: 1;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF000000');
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.3)));
	background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
	background-image: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
	background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
	border-radius: 1rem;
	box-shadow: inset 0 0.3rem 0.2rem rgba(255, 255, 255, 0.2), inset 0 -0.3rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
	color: #fff;
	cursor: pointer;
	display: block;
	height: 4.8rem;
	line-height: 4.8rem;
	margin: 0.5rem auto 0 auto;
	text-shadow: 0 0.05rem rgba(0, 0, 0, 0.8), 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2), 0 -0.2rem 0.4rem rgba(255, 255, 255, 0.2);
	width: calc(100% - 2rem);
	max-width: 500px;
}

[class*="zocial-"]:active {
	-moz-transform: scale(0.98);
	-ms-transform: scale(0.98);
	-webkit-transform: scale(0.98);
	transform: scale(0.98);
}

[class*="zocial-"]:hover {
	*zoom: 1;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF000000');
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.5)));
	background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
	background-image: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
	background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

@media screen and (max-width: 640px) {
	.spine-player-controls-hidden {
		pointer-events: auto;
		opacity: 1;
		transition: all 0 ease 0;
	}
}
